// USER VARIABLES SECTION

$accent: orange // Accent Color
$fontsize: 18px // Body Font Size
$textcolor: #333 // Text Color
$system: -apple-system, BlinkMacSystemFont, Arial, sans-serif // System Font Family
$rubik: Rubik, sans-serif

$colorSoftBlue: hsl(231, 69%, 60%)
$colorSoftRed: hsl(0, 94%, 66%)
$colorGrayishBlue: hsl(229, 8%, 60%)
$colorVeryDarkBlue: hsl(229, 31%, 21%)

// Bootstrap compatible gutter variable => $gutter
$grid-gutter-width: 20px
$gutter: $grid-gutter-width

// IMPORT SECTION

@import 'node_modules/bootstrap/scss/bootstrap-reboot.scss' // Bootstrap Reboot collection
@import 'node_modules/bootstrap/scss/mixins/_breakpoints.scss' // Bootstrap Breakpoints mixin
// @import 'node_modules/bootstrap/scss/bootstrap-grid.scss' // Optional Bootstrap Grid
// @import 'node_modules/bootstrap/scss/utilities/_sizing.scss' // Optional Bootstrap Utilites

// FONTS LOAD SECTION

@mixin font($fname, $fstyle, $fweight, $furl)
	@font-face
		font-family: $fname
		font-style: $fstyle
		font-weight: $fweight
		// font-display: swap // Uncomment to initially display system fonts
		src: local($fname), url($furl) format('woff2')

@include font('Rubik', italic, 400, '../fonts/rubik-italic.woff2')
@include font('Rubik', normal, 500, '../fonts/rubik-medium.woff2')
@include font('Rubik', italic, 500, '../fonts/rubik-mediumitalic.woff2')
@include font('Rubik', normal, 400, '../fonts/rubik-regular.woff2')

// GENERAL DOCUMENT STYLES

::placeholder
	color: #666

::selection
	background-color: $accent
	color: #fff

input, textarea
	outline: none
	&:focus:required:invalid
		border-color: red
	&:required:valid
		border-color: green

body
	font-family: $rubik
	font-size: $fontsize
	min-width: 375px
	position: relative
	line-height: 1.65
	overflow-x: hidden
	color: $textcolor
